<template>
  <!-- <div>
    <h1>轮播管理</h1>
  </div> -->
  <div id="lbgl">
    <div id="sxcx">
      <div class="sxcx_header clear">
        <div><span>筛</span>选查询
          <span @click="isClose">{{closeText}}<i :class="upOrDown"></i></span>

        </div>
      </div>

      <div class="sxcx_body clear" id="closeBody">
        <div class="sxcx_kuang">
          <label for="">关键词</label>
          <input placeholder="请输入内容" class="sxcx_input" v-model="searchFrom.title">
        </div>
        <div class="sxcx_kuang">
          <label for="">状态</label>
          <el-select v-model="searchFrom.shelf" placeholder="全部" class="sxcx_state">
            <el-option v-for="(item,i) in options" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="block sxcx_kuang ">
          <span class="demonstration">上架时间</span>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchFrom.shelfTime" type="datetime" placeholder="请选择时间" class="sxcx_shangjia">
          </el-date-picker>
        </div>
      </div>
      <div>

        <div class="sxcx_btn">
          <button @click="czBanner">重置</button>
          <button @click="sxBanner">筛选</button>
        </div>
      </div>
      <!-- 弹框1 -->
      <div class="tjlb">
        <!-- <div class="sxcx_header">
          <span>添加轮播</span>
        </div> -->
        <div class="sxcx_tjlb">
          <el-dialog title="添加轮播" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="轮播标题" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item label="封面图片" prop="img" required>
                <div v-if="dialogVisible">
                  <div style="float:left">
                    <!-- 选择图片 -->
                    <div id="upBut" @click="upload">
                      上传图片
                      <input id="upInput" type="file" accept="image/*" @change="chooseImg" />
                    </div>
                    <!-- 提交图片 -->
                    <!-- <button @click="uploadImg">提交图片</button> -->
                    <!-- 通过后台返回的url向文件服务器请求图片 -->
                    <!-- <img :src="'http://localhost:8080/getImg?sort=' + this.ruleForm.img"> -->
                  </div>
                  <div id="can" style="float:left;margin-left:50px">
                    <!-- 预览图片 -->
                    <img v-if="isImg" :src="'http://localhost:8080/getImg?sort=' + this.ruleForm.img" alt="">
                    <canvas ref="imgPreview" height="0" width="0"></canvas>
                  </div>
                </div>

              </el-form-item>
              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="genre" required>
                <el-select v-model="ruleForm.genre" placeholder="请选择类型">
                  <el-option label="H5" value="H5"></el-option>
                  <el-option label="商品" value="商品"></el-option>
                  <el-option label="专区" value="专区"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="上架时间段" prop="shelfTime">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.shelfTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="预设上架时间" prop="time">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.time" type="datetime" placeholder="选择日期时间">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="上架" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <!-- 弹框2 -->
      <div class="tjlb">
        <!-- <div class="sxcx_header">
          <span>添加轮播</span>
        </div> -->
        <div class="sxcx_tjlb">
          <el-dialog title="编辑轮播" :visible.sync="dialogVisible2" width="70%" :before-close="handleClose">
            <el-form v-model="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
              <el-form-item label="轮播标题" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
              <el-form-item label="封面图片" prop="img" required>
                <div v-if="dialogVisible2">
                  <div style="float:left">
                    <!-- 选择图片 -->
                    <div id="upBut" @click="upload">
                      上传图片
                      <input id="upInput" type="file" accept="image/*" @change="chooseImg" />
                    </div>
                    <!-- 提交图片 -->
                    <!-- <button @click="uploadImg">提交图片</button> -->
                    <!-- 通过后台返回的url向文件服务器请求图片 -->
                    <!-- <img :src="'http://localhost:8080/getImg?sort=' + this.ruleForm.img"> -->
                  </div>
                  <div id="can" style="float:left;margin-left:50px">
                    <!-- 预览图片 -->
                    <img v-if="isImg" :src="'http://localhost:8080/getImg?sort=' + this.ruleForm.img">
                    <canvas ref="imgPreview" height="0" width="0"></canvas>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="位置" prop="address" required>
                <el-input v-model="ruleForm.address" style="width:60px"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="genre" required>
                <el-select v-model="ruleForm.genre" placeholder="请选择类型">
                  <el-option label="H5" value="H5"></el-option>
                  <el-option label="商品" value="商品"></el-option>
                  <el-option label="专区" value="专区"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="上架时间段" prop="shelfTime">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.shelfTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="预设上架时间" prop="time">
                <div class="block">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.time" type="datetime" placeholder="选择日期时间">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="上架" prop="shelf">
                <el-switch v-model="ruleForm.shelf"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="editSure">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </div>
    <div id="sjlb">
      <div class="clear">
        <span>数据列表</span>
      </div>
      <div>
        <label for="">排序方式</label>
        <select name="paixu" id="sjlb_paixu">
          <option value="0">排序方式</option>
          <option value="1">顺序</option>
          <option value="2">逆序</option>
        </select>
        <label for="">批量操作</label>
        <select name="piliang" id="sjlb_piliang">
          <option value="1">禁用</option>
          <option value="2">未禁用</option>
        </select>
        <el-button class="sjlb_btn" type="button" @click="dialogVisible = true,ruleForm.img='assets/zanwu.png'">添加</el-button>
      </div>
      <div class="sjlb_table">
        <el-table :data="sjlbData" border style="width: 100%">
          <el-table-column type="selection" width="40">
          </el-table-column>
          <el-table-column prop="id" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="title" label="轮播标题" width="110">
          </el-table-column>
          <el-table-column prop="img" label="封面图" width="150">
            <div style="width:130px;height:78px;text-align:center;" slot-scope="scope">
              <img style="width:98px;background-repeat:no-repeat;background-size:cover;overflow:hidden;" :src="'http://localhost:8080/getImg?sort='+scope.row.img" alt="">
            </div>
          </el-table-column>
          <el-table-column prop="address" label="位置" width="50">
          </el-table-column>
          <el-table-column prop="shelf" label="是否上架" width="80">
            <template slot-scope="scope">
              <el-switch active-color="#409EFF" inactive-color="#C0CCDA" v-model="scope.row.shelf" @change="bannerShelf(scope.row)"></el-switch>
            </template>
            <!-- :active-value="1" 
               :inactive-value="0"  -->
          </el-table-column>
          <el-table-column prop="shelfTime" label="上架时间段" width="210">

          </el-table-column>
          <el-table-column prop="time" label="上架时间" width="180">
          </el-table-column>
          <el-table-column prop="genre" label="类型" width="60">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <div slot-scope="scope">
              <el-button @click="editData(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delSure(scope.row)" type="text" size="small">删除</el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="sjlb_page">
        <!-- .sync用于当点击页时，nowpage变为点击页-->
        <el-pagination :current-page.sync="nowPage" :page-size="nowNum" layout=" prev, pager, next" :total="lbglData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import date from '../../components/package'
export default {
  data() {
    return {
      lbglData: [],
      input1: '',
      value1: '',
      value: '',
      nowPage: 1,
      nowNum: 5,//每页显示几条数据
      options: [{
        value: '全部',
        label: '',
      },
      {
        value: '上架',
        label: '',
      },
      {
        value: '下架',
        label: '',
      }],
      searchFrom: {
        title: '',
        shelf: '全部',
        shelfTime: ''
      },
      closeText: '收起',
      upOrDown: 'el-icon-arrow-up',
      dialogVisible: false,
      dialogVisible2: false,
      ruleForm: {
        title: '',
        img: '',
        address: '',
        shelfTime: '',
        time: '',//欲上架时间
        genre: '',
        shelf: false,
      },
      isImg: true,
      rules: {
        title: [
          { required: true, message: '请输入轮播名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        img: [
          { required: true, message: '(请注意图片尺寸)', trigger: 'change' }
        ],
        address: [
          {
            required: true, message: '请填写位置', trigger: 'blur'
          }
        ],
        // shelfTime: [
        //   { type: 'date', message: '请选择时间', trigger: 'change' }
        // ],
        // time: [
        //   { type: 'date', message: '请选择时间', trigger: 'change' }
        // ],
        genre: [
          { type: 'string', required: true, message: '请至少选择一个类型', trigger: 'change' }
        ],

      },
      // 上传图片里的文件路径地址。
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }]
    }
  },
  // 计算页码数
  computed: {
    sjlbData() {
      return this.lbglData.slice((this.nowPage - 1) * this.nowNum, this.nowPage * this.nowNum);
    }
  },
  mounted() {
    this.getallLbgl();
  },
  methods: {
    //筛选
    sxBanner() {
      let from = { ...this.searchFrom };
      if (from.shelf == '上架') {
        from.shelf = '是';
      } else if (from.shelf == '下架') {
        from.shelf = '否'
      }
      this.getallLbgl(from);
      console.log(this.searchFrom)
      // console.log(from)
      //

    },
    //重置
    czBanner() {
      this.searchFrom = {
        title: '',
        shelf: '全部',
        shelfTime: ''
      }
      this.getallLbgl();
    },

    //编辑传数据
    editData(data) {
      this.dialogVisible2 = true;
      this.ruleForm = { ...data };
      this.ruleForm.shelfTime = this.ruleForm.shelfTime.split('~');
    },
    // 初始化
    init() {
      this.ruleForm = {};
      this.isImg = true;
      document.getElementById('upInput').value = '';
      let canvas = this.$refs['imgPreview'];
      canvas.width = 0;
      canvas.height = 0;
    },
    // 确认编辑
    editSure() {
      this.ruleForm.shelfTime = this.ruleForm.shelfTime[0] + '~' + this.ruleForm.shelfTime[1];
      this.ruleForm.img = 'assets/image/Women/' + this.name;
      this.$axios({
        url: '/oparate/editBanner',
        method: 'post',
        data: this.ruleForm
      }).then(() => {
        this.dialogVisible2 = false;
        this.uploadImg();
        this.init();
        this.getallLbgl(this.searchFrom);
      })
    },
    // 收起
    isClose() {
      let a = document.getElementById('closeBody');
      if (a.style.display == 'none') {
        a.style.display = 'block';
        this.closeText = '收起';
        this.upOrDown = 'el-icon-arrow-up'
      } else {
        a.style.display = 'none';
        this.closeText = '展开';
        this.upOrDown = 'el-icon-arrow-down'
      }
    },
    // 刷新所有数据
    getallLbgl(data = {}) {
      this.$axios({
        url: '/operate/getallbanner',
        method: 'get',
        params: data
      }).then((res) => {
        let data = res.data.data;
        data.filter((v) => {
          v.time = date.dateFn(v.time);
          if (v.shelf == '是') {
            v.shelf = true;
          } else {
            v.shelf = false;
          };
        });
        this.lbglData = data;
        // console.log(data)
        this.ruleForm = {
          title: '',
          img: '',
          address: '',
          shelfTime: '',
          time: '',//欲上架时间
          genre: '',
          shelf: false,
        }

      })
    },
    // 添加轮播中是否关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.init();
        })
        .catch(_ => { });
    },
    // 删除弹出信息
    delSure(data) {
      this.$confirm('确认删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    // 删除数据的方法
    del(data) {
      this.$axios({
        url: '/oprate/delBanner',
        method: 'post',
        data: data
      }).then(() => {
        this.getallLbgl(this.searchFrom);//this.searchFrom再一次查询
      })
    },

    // 轮播上传封面图片
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 添加轮播
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   console.log(valid)
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      if (this.ruleForm.delivery) {
        this.ruleForm.delivery = '是'
      } else {
        this.ruleForm.delivery = '否';
      }
      this.ruleForm.img = 'assets/image/Women/' + this.name;
      this.ruleForm.shelfTime = this.ruleForm.shelfTime[0] + '~' + this.ruleForm.shelfTime[1];
      this.$axios({
        url: '/operate/addBanner',
        method: 'post',
        data: this.ruleForm
      }).then((res) => {
        this.dialogVisible = false;
        this.uploadImg();
        this.init();
        this.getallLbgl();
      })
    },
    // 轮播中el-form
    labelPosition() {

    },
    // 是否上架
    bannerShelf(val) {
      //val与scope.row类似，代表点击的这一行数据这一行
      if (val.shelf) {
        val.shelf = '是'
      } else {
        val.shelf = '否'
      }
      console.log(val);
      // 调用数据
      this.$axios({
        url: '/operate/bannerShelf',
        method: 'post',
        data: val
      }).then(() => {
        if (val.shelf == '是') {
          this.$message({
            message: '商品上架',
            type: 'success'
          });
        } else {
          this.$message({
            message: '商品下架成功',
            type: 'warning'
          });
        }
        this.getallLbgl();
      })


    },
    upload() {
      document.querySelector('#upInput').click();
    },
    chooseImg(event) {
      this.isImg = false;
      //获取图片信息
      let file = event.target.files[0]
      this.name = file.name;
      let reader = new FileReader()
      let img = new Image()
      // 读取图片
      reader.readAsDataURL(file)
      // 读取完毕后的操作
      reader.onloadend = (e) => {
        this.ruleForm.img = '';
        img.src = e.target.result
        // 这里的e.target就是reader
        // console.log(reader.result)
        // reader.result就是图片的base64字符串
        this.base64 = reader.result
      }
      // 预览图片
      let canvas = this.$refs['imgPreview']
      let context = canvas.getContext('2d')
      img.onload = () => {
        img.width = 100
        img.height = 100
        // 设置canvas大小
        canvas.width = 100
        canvas.height = 100
        // 清空canvas
        context.clearRect(0, 0, 100, 100)
        // 画图
        context.drawImage(img, 0, 0, 100, 100)
      }
    },
    uploadImg() {
      this.$axios({
        url: '/uploadImg',
        method: 'post',
        data: {
          base64: this.base64,
          url: this.ruleForm.img
        }
      }).then((res) => {
        // this.imgUrlFromServer = 'http://localhost:8080/getImg?sort=' + this.ruleForm.img;
      })
    }
  }
}
</script>
<style lang='less' scoped>
* {
  padding: 0;
  margin: 0;
}
clear::after {
  content: "";
  display: none;
  clear: both;
}
#lbgl {
  font-size: 12px;
  color: rgb(51, 51, 51);
}
.sxcx_header {
  background-color: rgb(242, 242, 242);
  color: rgb(102, 102, 102);
  font-size: 14px;
  line-height: 40px;
  padding-left: 15px;
}
.sxcx_header > div > span:first-child {
  font-size: 16px;
  float: left;
}
.sxcx_header > div > span:last-child {
  color: rgb(51, 51, 51);
  float: right;
  padding-right: 30px;
}
.sxcx_body {
  margin-top: 20px;
  margin-bottom: 60px;
}
.sxcx_body .sxcx_kuang {
  padding-right: 15px;
  float: left;
  margin-right: 80px;
}

.sxcx_body input {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 40px;
  width: 200px;
  padding: 0 30px;
  /* color: #dcdfe6; */
  margin-left: 10px;
  font-size: 12px;
}
.sxcx_body .sxcx_shangjia,
.sxcx_body .sxcx_state {
  color: #dcdfe6;
  margin-left: 10px;
  font-size: 12px;
}

.sxcx_btn button {
  margin-top: 40px;
  color: rgb(255, 255, 255);
  width: 100px;
  line-height: 35px;
  background-color: rgb(102, 102, 102);
  border: none;
  border-radius: 4px;
}
.sxcx_btn button:first-child {
  margin-right: 30px;
  background-color: rgb(204, 204, 204);
}
#sjlb {
  background-color: rgb(242, 242, 242);
  padding: 0 15px 30px 15px;
  color: black;
  padding-left: 15px;
}
#sjlb div:first-child {
  font-size: 14px;
  color: rgb(102, 102, 102);
  line-height: 40px;
  margin-bottom: 15px;
}
#sjlb div:first-child span {
  float: left;
}
#sjlb div:nth-child(2) {
  float: right;
  padding: 10px 0 10px 0;
  /* line-height: 40px; */
}
#sjlb div:nth-child(2) select {
  color: #dcdfe6;
  border: 1px solid #dcdfe6;
  width: 90px;
  margin-right: 20px;
}
#sjlb div:nth-child(2) select,
#sjlb div:nth-child(2) .sjlb_btn {
  height: 25px;
}
#sjlb div:nth-child(2) .sjlb_btn {
  width: 60px;
}
#sjlb div:nth-child(2) label {
  margin-right: 5px;
}
/* 表格文字居中对齐 */
#sjlb .sjlb_table /deep/.el-table th > .cell {
  text-align: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
}

#sjlb .sjlb_table /deep/.el-table .cell {
  text-align: center;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
#sjlb .sjlb_page {
  margin-top: 30px;
  text-align: center;
}

.el-form /deep/ .el-form-item {
  margin: 40px;
}
.el-form .el-form-item /deep/ .el-col {
  margin-top: -40px;
}
.el-form .el-form-item /deep/ .el-col:first-child {
  margin-left: -40px;
}
.el-dialog__body /deep/.el-from {
  text-align: center;
}
.el-form-item__content .el-button {
  width: 80px;
  line-height: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
#can {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
}
#upBut {
  text-align: center;
  background-color: rgb(64, 158, 255);
  width: 80px;
  height: 40px;
  cursor: pointer;
  color: white;
}
#upInput {
  display: none;
}
</style>